<template>
  <div class="amap-page-container">
    <div class="amap-wrapper">
      <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"
                          v-show="showSearch"
                          style="position: absolute;right: 10px;top: 10px;border: 1px solid #f4f4f4"></el-amap-search-box>
      <el-amap
        class="amap-box"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :center="center"
        :plugin="plugin"
        :events="events">
        <el-amap-marker v-for="(marker, index) in markers" :position="marker" :vid="index" :key="index" :clickable="true">
          <slot name="markerIcon" :marker="marker"></slot>
        </el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

<script>
  import { AMapManager } from 'vue-amap'

  export default {
    name: 'Amap',
    props: {
      //变焦
      zoom: {
        type: Number,
        default: 12
      },
      marker: {
        type: Array,
        default: function() {
          return []
        }
      },
      //搜索
      showSearch: {
        type: Boolean,
        default: false
      },
      showSearchAreaNum: {
        type: Number,
        default: 5
      }
    },
    data() {
      let self = this
      return {
        markers: {
          type: Array,
          default: []
        },
        amapManager: new AMapManager(),
        searchOption: {},
        center: [121.487, 31.249],
        plugin: [{
          pName: 'ToolBar',
          events: {
            init(instance) {
              //console.log(instance)
            }
          }
        }],
        events: {
          click(e) {
            console.info(e)
            if (e.type == 'click') {
              let lngLat = e.lnglat
              let lng = lngLat.lng
              let lat = lngLat.lat
              let position = { lng: lng, lat: lat }
              self.getAddress(position)
            }
          }
        }
      }
    },
    methods: {
      getAddress(position) {
        let self = this
        // 这里通过高德 SDK 完成。
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        })
        geocoder.getAddress([position.lng, position.lat], function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              position.address = result.regeocode.formattedAddress
              self.$emit('pointClick', position)
              self.$nextTick()
            }
          }
        })
      },
      onSearchResult(pois) {
        let latSum = 0
        let lngSum = 0
        this.markers = []
        if (pois.length > 0) {
          if (pois.length > this.showSearchAreaNum) {
            pois = pois.slice(0, this.showSearchAreaNum)
          }
          pois.forEach(poi => {
            console.log(poi)
            let { lng, lat } = poi
            lngSum += lng
            latSum += lat
            this.markers.push([poi.lng, poi.lat])
          })
          let center = [lngSum / pois.length, latSum / pois.length]
          this.center = center
        }
      }
    },
    mounted() {
      this.markers = []
      console.log(this.marker)
      if (this.marker[0] != '' && this.marker[0] != null && this.marker[1] != '' && this.marker[1] != null) {
        this.markers.push(this.marker)
      }
    },
    created() {

    }
  }
</script>

<style>
  .amap-wrapper {
    width: 100%;
    height: 500px;
    margin-top: 10px;
  }

  .amap-page-container {
    position: relative;
  }
</style>



